<template>
  <div class="header_container">
    <el-breadcrumb separator="'/">
      <el-breadcrumb-item :to="{path:'manage'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item,index) in $route.meta" key="index">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-dropdown @command="handleCommand" menu-align="start">
      <img :src="baseImgPath+adminInfo.avatar" class="avator">
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="home">首页</el-dropdown-item>
        <el-dropdown-item command="singout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import {singout} from '@/api/getData'
  import {baseImgPath} from '@/config/env'
  import {mapActions, mapState} from 'vuex'

  export default {
    data() {
      return {
        baseImgPath,
      }
    },
    created() {
      if (!this.adminInfo.id) {
        this.getAdminData()
      }
    },
    computed: {
      ...mapState(['adminInfo']),
    },
    methods: {
      ...mapActions(['getAdminData']),
      async handleCommand(command) {
        if (command === 'home') {
          this.$router.push('/manage');
        } else if (command === 'singout') {
          const res = await singout();
          if (res.status === 1) {
            this.$message({
              type: 'success',
              message: '退出成功'
            });
            this.$router.push('/');
          } else {
            this.$message({
              type: 'error',
              message: res.message
            });
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
